@extends('Home.Index.public')
@section('content')
    <script src="{{env('__SERVER_NAME__')}}{{env('__HJS__')}}echart.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>

        <div class="copyrights">Collect from <a href="http://www.51bamin.com/" >东南大鱼</a></div>
            <div class="row">
               <div class="col-md-12">

                </div>
            </div><!--/.col-->
        </div><!--/.row-->

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('line'));
        var bingChart = echarts.init(document.getElementById('bing'));
        var city= echarts.init(document.getElementById('city'));

        // 曲线图指定图表的配置项和数据
        option = {
            title: {
                text: '最近一周访问'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['访问量']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : [
                    <volist name="weekc" id="week">
                        '{$week['week']}',
            </volist>
        ]
        }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
                series : [
            {
                name:'访问量',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[
                <volist name="weekc" id="coo">
                    '{$coo['count']}',
        </volist>
        ]
        },

        ]
        };
        //饼状图
        bing = {
            title : {
                text: '用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','搜索引擎','友情链接']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:"{$from['self']}", name:'直接访问'},
                        {value:"{$from['engine']}", name:'搜索引擎'},
                        {value:"{$from['friend']}", name:'友情链接'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //城市分布图
        var data = [
                <volist name="area" id="are">
                {name: '{$are["v_city"]}', value: {$are["count"]}},
        </volist>

        ];
        var geoCoordMap = {
                <volist name="area" id="area">
                '{$area["v_city"]}':{$area["v_location"]},
        </volist>
        };

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        city_chart = {
            backgroundColor: '#404a59',
            title: {
                text: '国内地区访问统计',
                subtext: 'data from 霞客网络科技',
                sublink: 'www.xiakenet.com',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip : {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x:'right',
                data:['点击量'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series : [
                {
                    name: '访问次数',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 6)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        bingChart.setOption(bing);
        city.setOption(city_chart, true);
    </script>

@endsection